<!--
 * @Author: 赵广成 76118299@qq.com
 * @Date: 2024-10-18 09:29:04
 * @LastEditors: 赵广成 76118299@qq.com
 * @LastEditTime: 2024-10-19 09:45:53
 * @FilePath: \tianhe\src\views\tab\order.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>


<el-form :model="queryForm.param"  :inline="true"  >
  <el-form-item prop="outTradeNo" label="商品订单号">
     <el-input v-model="queryForm.param.outTradeNo" placeholder="请输入商品订单号"></el-input>
   </el-form-item>
   <el-form-item prop="phonenumber" label="下单人电话">
     <el-input v-model="queryForm.param.phonenumber" placeholder="请输入下单人电话"></el-input>
   </el-form-item>
   <el-form-item prop="nickName" label="下单人昵称">
     <el-input v-model="queryForm.param.nickName" placeholder="请输入下单人下单人昵称"></el-input>
   </el-form-item>
   <el-form-item>
    <el-button type="primary"  @click="initUserList" >搜索</el-button>
    </el-form-item>
   </el-form>
  
  <el-table :data="tableData" style="width: 100%">
      <el-table-column label="商品标题" prop="vipTitle" />
      <el-table-column label="商品类型" prop="vipType" />
      <el-table-column label="商品金额" prop="totalFee" />
      <el-table-column label="商品描述" prop="description" />
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small"  type="primary" @click="handleEdit( scope.row)">
            订单退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :size="size"
        background layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </template>
  
  <script  setup>
       import {ref} from 'vue';
       import request from '@/util/request';
       const tableData=ref([]);
       const total=ref(0);
       const queryForm=ref({
          query:"",
          pageNum:1,
          pageSize:10,
          param:{
            phonenumber:'',
            nickName:'',
            outTradeNo:'',
            transactionId:'',
            userId:''
          }
       })
       const initUserList=async ()=>{
         const res= await request.post("/order/list",queryForm.value)
         tableData.value=res.data.data.dataList;
         total.value=res.data.data.total;
       }
       initUserList();

       const handleSizeChange=(pageSize)=>{
          queryForm.value.pageNum=1;
          queryForm.value.pageSize=pageSize
          initUserList();
       }
       const handleCurrentChange=(pageNum)=>{
          queryForm.value.pageNum=pageNum;
          initUserList();
       }
       const tefundParam=ref({
        outTradeNo:'',
        totalAmount:''
       })
      const handleEdit=async (obj)=>{
        tefundParam.value.outTradeNo=obj.outTradeNo;
        tefundParam.value.totalAmount=obj.totalAmount;
        const res= await request.post("/order/tefund",tefundParam.value)
        let data = res.data;
        if(data.code==200){
          ElMessage.success("退款成功")
        }else{
          ElMessage.error(data.msg);
        }
      }





  






  </script>
  
  <style lang="scss" scoped>
  
  </style>
  